<template>
    <div class="">
        <el-pagination
            :background="background"
            :current-page.sync="currentPage"
            :layout="layout"
            :page-sizes="pageSizes"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "pagination",
        props: {
            background: {
                type: Boolean,
                default: true
            },
            layout: {
                type: String,
                default: "total, sizes, prev, pager, next, jumper"
            },
            total: {
                required: true,
                type: Number
            },
            page: {
                type: Number,
                default: 1
            },
            limit: {
                type: Number,
                default: 10
            },
            pageSizes: {
                type: Array,
                default() {
                    return [15, 30, 50, 100];
                }
            },
        },
        computed: {
            currentPage: {
                get() {
                    return this.page;
                },
                set(val) {
                    this.$emit("update:page", val);
                }
            },
            pageSize: {
                get() {
                    return this.limit;
                },
                set(val) {
                    this.$emit("update:limit", val);
                }
            }
        },
        mounted() {
        },
        methods: {
            // pageSize 改变时会触发	每页条数
            handleSizeChange(val) {
                this.$emit("pagination", { page: this.currentPage, limit: val });
            },
            // currentPage 改变时会触发	当前页
            handleCurrentChange(val) {
                this.$emit("pagination", { page: val, limit: this.pageSize });
            }
        }
    }
</script>

<style scoped>

</style>
